 <template>
  <el-dialog :visible.sync="showPropertyDialog"
             :close-on-click-modal="false"
             :before-close="propertiesDialogCancel"
             title="密度"
             append-to-body
             width="700px"
             @close="propertiesDialogCancel">
    <el-form label-width="auto"
             ref="form"
             :model="form"
             :rules="rules">
      <ul class="violation-content">
        <li v-for="(item, index) in form.list"
            :key="item.key">
          <div class="content-item">
            <el-form-item :label="item.name"
                          :prop="`list[${index}].density`"
                          :rules="rules.density">
              <el-input type="text"
                        clearable
                        placeholder="请输入"
                        v-model.trim="item.density"></el-input>
            </el-form-item>
          </div>
        </li>
      </ul>
    </el-form>
    <div slot="footer"
         class="dialog-footer">
      <el-button type="text"
                 @click="propertiesDialogCancel"
                 class="cancel-btn">取消</el-button>
      <el-button type="primary"
                 @click="propertiesDialogSubmit"
                 class="checkok-btn">确认</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { deepClone } from "@/utils/index"
var validateDensity = (rule, value, callback) => {
  if (!value) {
    callback(new Error('请输入密度'));
  } else if (!(/(^[1-9]\d*(\.\d{1,})?)$/.test(value) || /(^[0](\.\d{1,}){1})$/.test(value))) {
    callback(new Error('请输入正数'));
  } else {
    callback();
  }
};
export default {
  name: "index",
  props: {
    showPropertyDialog: {
      type: Boolean,
      default: false,
    },
    propertyList: {
      type: Array,
      default: false,
    }
  },
  watch: {
    showPropertyDialog (newValue, oldValue) {
      // 此处可将父组件传过来的值一一对应的赋值给子组件
      if (newValue) {
        this.form.list = deepClone(this.propertyList)
        console.log(this.list, "###list")
      }
    },
  },
  data () {
    return {
      form: {
        list: []
      },
      rules: {
        density: [
          { required: true, message: '请输入密度', trigger: 'blur' },
          { validator: validateDensity, trigger: 'blur' },
        ],

      },

    };
  },

  computed: {},
  mounted () {

  },

  beforeDestroy () {

  },
  methods: {

    propertiesDialogCancel () {

      this.$emit('update:showPropertyDialog', false)
    },
    propertiesDialogSubmit () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$emit("sentPropertyData", this.form["list"])
          this.$emit('update:showPropertyDialog', false)
        }

      })


    },
  }
};
</script>
 <style src="@/assets/powder.scss" scoped lang="scss"></style>